<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer弹层组件移动版</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link href="http://layer.layui.com/mobile/demo.css" type="text/css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="./mobile/layer.js"></script>
</head>

<body>
<header>
  <div class="main">
    <h1>Layer For Mobile<code><script>document.write(layer.v)</script></code></h1>
  </div>
</header>

<section class="main">
  <p>layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。layer mobile正致力于成为您WebApp开发过程中弹出交互的不二选择。</p>
  
  
  
  <h2>小试牛刀</h2>
  
  <p class="demo" style="margin-top: 20px;">
    <a href="javascript:;" class="open1">信息框</a>
    <a href="javascript:;" class="open2">提示</a>
    <a href="javascript:;" class="open3">询问框</a>
    <a href="javascript:;" class="open4">底部对话框</a>
    <a href="javascript:;" class="open5">底部提示</a>
    <a href="javascript:;" class="open6">自定义标题风格</a>
    <a href="javascript:;" class="open7">页面层</a>
    <a href="javascript:;" class="open8">loading层</a>
    <a href="javascript:;" class="open8">loading带文字</a>
  </p>

<script>
$('.open1').on('click',function(){
	layer.open({
	  content: '移动版和PC版不能同时存在同一页面'
	  ,btn: '我知道了'
	});
})
$('.open2').on('click',function(){
    layer.open({
      content: 'hello layer'
      ,skin: 'msg'
      ,time: 2 //2秒后自动关闭
    });
})
$('.open3').on('click',function(){
    layer.open({
      content: '您确定要刷新一下本页面吗？'
      ,btn: ['刷新', '不要']
      ,yes: function(index){
        location.reload();
        layer.close(index);
      }
    });
})
$('.open4').on('click',function(){
    layer.open({
      content: '这是一个底部弹出的询问提示'
      ,btn: ['删除', '取消']
      ,skin: 'footer'
      ,yes: function(index){
        layer.open({content: '执行删除操作'})
      }
    });
})
$('.open5').on('click',function(){
    layer.open({
      content: '一个没有任何按钮的底部提示'
      ,skin: 'footer'
    });
})
$('.open6').on('click',function(){
    layer.open({
      title: [
        '我是标题',
        'background-color: #FF4351; color:#fff;'
      ]
      ,content: '标题风格任你定义。'
    });
})
$('.open7').on('click',function(){
    layer.open({
      type: 1
      ,content: '可传入任何内容，支持html。一般用于手机页面中'
      ,anim: 'up'
      ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
    });
})
$('.open8').on('click',function(){
	layer.open({type: 2});
})
$('.open9').on('click',function(){
    layer.open({
      type: 2
      ,content: '加载中'
    });
})

</script>
  
  
  
</section>

<section class="main">

  <h2 style="padding:10px 0 5px;">功能说明</h2>
  
  <p><strong>一个在底部弹出的完整对话框：</strong></p>
  <pre>
<span id="demo2a">layer.open({
  title: [
    '我是标题',
    'background-color:#8DCE16; color:#fff;'
  ]
  ,anim: 'up'
  ,content: '展现的是全部结构'
  ,btn: ['确认', '取消']
});</span>
<a href="javascript:;"  class="button" onclick="new Function(demo2a.innerHTML)();">运行</a>
  </pre>
  
  <p style="margin-top:10px;"><strong>设置3秒自动关闭：</strong></p>
  <pre>
<span id="demo1">layer.open({
  content: '通过style设置你想要的样式'
  ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
  ,time: 3
});</span>
<a href="javascript:;"  class="button" onclick="new Function(demo1.innerHTML)();">运行</a>
  </pre>


  <p><strong>设置不允许点遮罩关闭：</strong></p>
  <pre>
<span id="demo3">layer.open({
  content: '不允许点击遮罩关闭',
  btn: '我知道了',
  shadeClose: false,
  yes: function(){
    layer.open({
      content: '好的'
      ,time: 2
      ,skin: 'msg'
    });
  }
});</span>
<a href="javascript:;"  class="button" onclick="new Function(demo3.innerHTML)();">运行</a>
</pre>

  <p><strong>自定义一个全屏的页面层：</strong></p>
  <pre>
<span id="demo5">var pageii = layer.open({
  type: 1
  ,content: html
  ,anim: 'up'
  ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});</span>
<a href="javascript:;"  class="button" onclick="new Function('var html = demo5a.value;'+demo5.innerHTML)();">运行</a>
</pre>
<textarea id="demo5a" style="display:none;">
  <div style="padding:20px;">
    <p style="margin-bottom: 20px;">仿佛是一个全新的页面</p>
    <a href="javascript:;"  class="button" onclick="layer.closeAll(); layer.open({content:'世界恢复原样 →_→', time:2});  ">我要关闭！！</a>
   </div>
</textarea>

  
  <h2 style="margin-top: 50px;">结语</h2>
  <p>请恕我们无法为您一一演示，我们更希望你认真去阅读文档，那里列举了layer所有的接口，它们会帮助你完成形形色色的展现形式。</p>


</section>





</body>
</html>


